<template>
  <div class="layout-container">
    <!-- 导航栏 -->
    <nav class="navbar" :class="{ scrolled: isNavbarScrolled }" aria-label="主导航">
      <!-- 滚动进度指示器 -->
      <div class="scroll-progress" id="scroll-progress" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
      
      <div class="navbar-content">
        <!-- 移动端汉堡菜单按钮 -->
        <button 
          class="mobile-menu-toggle" 
          @click="toggleMobileMenu" 
          aria-label="菜单" 
          :aria-expanded="mobileMenuOpen.toString()"
          v-if="isMobile"
        >
          <el-icon v-if="!mobileMenuOpen"><i-ep-menu /></el-icon>
          <el-icon v-else><i-ep-close /></el-icon>
        </button>
        
        <div class="navbar-left">
          <router-link to="/" class="logo" aria-label="返回首页">
            <el-icon class="logo-icon"><i-ep-home /></el-icon>
            <span class="logo-text">校园二手交易平台</span>
          </router-link>
          
          <!-- 桌面端导航链接 -->
          <div class="nav-links" :class="{ 'mobile-open': mobileMenuOpen && isMobile }">
            <router-link 
              to="/" 
              class="nav-link" 
              exact 
              active-class="active"
              :aria-current="$route.path === '/' ? 'page' : undefined"
            >首页</router-link>
            
            <!-- 商品分类下拉菜单 -->
            <div class="nav-dropdown" role="group" aria-labelledby="category-menu">
              <div class="dropdown-trigger nav-link" id="category-menu">
                商品分类
                <el-icon class="dropdown-icon"><i-ep-arrow-down /></el-icon>
              </div>
              <div class="dropdown-menu" role="menu">
                <router-link to="/products?category=digital" class="dropdown-item" role="menuitem">数码产品</router-link>
                <router-link to="/products?category=books" class="dropdown-item" role="menuitem">图书文具</router-link>
                <router-link to="/products?category=clothing" class="dropdown-item" role="menuitem">服饰鞋包</router-link>
                <router-link to="/products?category=sports" class="dropdown-item" role="menuitem">运动健身</router-link>
                <router-link to="/products?category=furniture" class="dropdown-item" role="menuitem">家居用品</router-link>
                <router-link to="/products?category=others" class="dropdown-item" role="menuitem">其他商品</router-link>
              </div>
            </div>
            
            <router-link 
              to="/products?hot=1" 
              class="nav-link"
              :aria-current="$route.path.includes('/products?hot=1') ? 'page' : undefined"
            >热门商品</router-link>
            <router-link 
              to="/publish" 
              class="nav-link nav-link-primary" 
              aria-label="发布新商品"
              :aria-current="$route.path === '/publish' ? 'page' : undefined"
            >发布商品</router-link>
            
            <!-- 帮助相关下拉菜单 -->
            <div class="nav-dropdown" role="group" aria-labelledby="help-menu">
              <div class="dropdown-trigger nav-link" id="help-menu">
                帮助中心
                <el-icon class="dropdown-icon"><i-ep-arrow-down /></el-icon>
              </div>
              <div class="dropdown-menu" role="menu">
                <router-link to="/help" class="dropdown-item" role="menuitem">使用指南</router-link>
                <router-link to="/faq" class="dropdown-item" role="menuitem">常见问题</router-link>
                <router-link to="/contact" class="dropdown-item" role="menuitem">联系我们</router-link>
              </div>
            </div>
          </div>
        </div>
        
        <div class="navbar-right">
          <!-- 搜索框 - 增强版 -->
      <div class="search-wrapper" ref="searchWrapperRef">
        <div class="search-input-container">
          <el-input
            v-model="searchKeyword"
            placeholder="搜索商品"
            prefix-icon="el-icon-search"
            class="search-input"
            @keyup.enter="handleSearch"
            @focus="showSearchSuggestions = true"
            @blur="hideSearchSuggestions"
            @input="handleSearchInput"
            @keydown.esc="showSearchSuggestions = false"
            clearable
            aria-autocomplete="both"
            aria-controls="search-suggestions"
            aria-expanded="showSearchSuggestions"
            role="combobox"
          />
          <button class="search-button" @click="handleSearch" aria-label="搜索" :disabled="!searchKeyword.trim()">
            <el-icon><i-ep-search /></el-icon>
          </button>
        </div>
            <!-- 搜索建议下拉框 -->
            <div 
              class="search-suggestions" 
              v-if="showSearchSuggestions && (searchHistory.length > 0 || popularSearches.length > 0 || searchSuggestions.length > 0)" 
              @click.stop
              id="search-suggestions"
              aria-labelledby="search-input"
              role="listbox"
            >
              <!-- 搜索结果 -->
              <div v-if="searchKeyword && searchSuggestions.length > 0">
                <div class="suggestion-title">
                  搜索建议
                </div>
                <div 
                  v-for="(item, index) in searchSuggestions" 
                  :key="`suggestion-${index}`" 
                  class="suggestion-item"
                  @click="selectSearchSuggestion(item)"
                  @keydown.enter="selectSearchSuggestion(item)"
                  @keydown.space="selectSearchSuggestion(item)"
                  tabindex="0"
                  role="option"
                  aria-selected="false"
                >
                  <el-icon><i-ep-search /></el-icon>
                  {{ item }}
                </div>
              </div>
              
              <!-- 历史搜索 -->
              <div v-else-if="searchHistory.length > 0">
                <div class="suggestion-title">
                  历史搜索
                </div>
                <div 
                  v-for="(keyword, index) in searchHistory" 
                  :key="`history-${index}`" 
                  class="suggestion-item"
                  @click="selectSearchSuggestion(keyword)"
                  @keydown.enter="selectSearchSuggestion(keyword)"
                  @keydown.space="selectSearchSuggestion(keyword)"
                  tabindex="0"
                  role="option"
                  aria-selected="false"
                >
                  <el-icon><i-ep-history /></el-icon>
                  {{ keyword }}
                </div>
              </div>
              
              <!-- 热门搜索 -->
              <div v-else>
                <div class="suggestion-title">
                  热门搜索
                </div>
                <button 
                  v-for="(item, index) in popularSearches" 
                  :key="`popular-${index}`"
                  class="suggestion-item"
                  @click="selectSearchSuggestion(item)"
                  @keydown.enter="selectSearchSuggestion(item)"
                  @keydown.space="selectSearchSuggestion(item)"
                  tabindex="0"
                  role="option"
                  aria-selected="false"
                >
                  <el-icon><i-ep-top /></el-icon>
                  <span class="search-rank">{{ index + 1 }}</span>
                  {{ item }}
                </button>
              </div>
              
              <!-- 清除历史 -->
              <div 
                v-if="searchHistory.length > 0" 
                class="clear-history" 
                @click="clearSearchHistory"
                aria-label="清除搜索历史"
                role="button"
                tabindex="0"
              >
                <el-icon><i-ep-delete /></el-icon>
                清除历史
              </div>
            </div>
          </div>
          
          <!-- 购物车 -->
          <router-link to="/cart" class="cart-icon" v-if="userStore.isLoggedIn" aria-label="购物车">
            <el-icon><i-ep-shopping-cart /></el-icon>
            <span v-if="cartStore.totalCount > 0" class="cart-badge" aria-live="polite">{{ cartStore.totalCount }}</span>
          </router-link>
          
          <!-- 用户信息 -->
          <template v-if="userStore.isLoggedIn">
            <div class="user-menu">
              <el-dropdown trigger="click" effect="fade-in">
                <span class="user-avatar" aria-haspopup="true" aria-expanded="false">
                  <el-avatar :src="userStore.userInfo.avatar || 'https://via.placeholder.com/40'" :alt="userStore.userInfo.username" />
                  <span class="user-name">{{ userStore.userInfo.username }}</span>
                  <el-icon class="el-icon--right"><i-ep-arrow-down /></el-icon>
                </span>
                <template #dropdown>
                  <el-dropdown-menu>
                    <el-dropdown-item @click="goToProfile">
                      <el-icon><i-ep-user /></el-icon>
                      个人信息
                    </el-dropdown-item>
                    <el-dropdown-item @click="goToOrders">
                      <el-icon><i-ep-document /></el-icon>
                      我的订单
                    </el-dropdown-item>
                    <el-dropdown-item @click="goToMyProducts">
                      <el-icon><i-ep-goods /></el-icon>
                      我的商品
                    </el-dropdown-item>
                    <el-dropdown-item v-if="userStore.isAdmin" @click="goToAdmin">
                      <el-icon><i-ep-setting /></el-icon>
                      后台管理
                    </el-dropdown-item>
                    <el-dropdown-item divided @click="handleLogout">
                      <el-icon><i-ep-switch-button /></el-icon>
                      退出登录
                    </el-dropdown-item>
                  </el-dropdown-menu>
                </template>
              </el-dropdown>
            </div>
          </template>
          
          <!-- 未登录状态 -->
          <div v-else class="login-register">
            <router-link to="/login" class="nav-button">登录</router-link>
            <router-link to="/register" class="nav-button primary">注册</router-link>
          </div>
        </div>
      </div>
    </nav>
    <!-- 主内容区域 -->
    <main class="main-content">
      <router-view />
    </main>
    <!-- 页脚 -->
    <footer class="footer">
      <div class="footer-content">
        <div class="footer-info">
          <h3>校园二手交易平台</h3>
          <p>让闲置物品找到新主人，让环保理念传递校园</p>
          <div class="footer-social">
            <a href="#" class="social-icon"><el-icon><i-ep-wechat /></el-icon></a>
            <a href="#" class="social-icon"><el-icon><i-ep-weibo /></el-icon></a>
            <a href="#" class="social-icon"><el-icon><i-ep-message /></el-icon></a>
          </div>
        </div>
        <div class="footer-links">
          <router-link to="/about" class="footer-link">关于我们</router-link>
          <router-link to="/help" class="footer-link">使用帮助</router-link>
          <router-link to="/privacy" class="footer-link">隐私政策</router-link>
          <router-link to="/contact" class="footer-link">联系我们</router-link>
          <router-link to="/faq" class="footer-link">常见问题</router-link>
          <router-link to="/terms" class="footer-link">服务条款</router-link>
        </div>
        <div class="footer-copyright">
          <p>© 2024 校园二手交易平台 版权所有</p>
        </div>
      </div>
    </footer>
  </div>
</template>

<script setup>
import { ref, computed, onMounted, onUnmounted, nextTick, watch } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { ElMessage, ElMessageBox } from 'element-plus'
import { useUserStore, useCartStore } from '@/store/index.js'

// 搜索相关
const searchKeyword = ref('')
const showSearchSuggestions = ref(false)
const searchHistory = ref([])
const searchSuggestions = ref([]) // 添加搜索建议数组
const searchWrapperRef = ref(null) // 添加引用

// 导航栏状态
const isNavbarScrolled = ref(false)
const isMobile = ref(false)
const mobileMenuOpen = ref(false)

const router = useRouter()
const route = useRoute() // 添加路由引用
const userStore = useUserStore()
const cartStore = useCartStore()

// 热门搜索关键词 - 添加热门搜索功能
const popularSearches = ref([
  '二手教材', '笔记本电脑', '运动器材', '校园卡套', '考研资料',
  '耳机', '充电宝', '自行车', '书籍', '文具'
])

// 响应式窗口大小检测
const checkMobile = () => {
  isMobile.value = window.innerWidth <= 768
  // 移动端检测时关闭菜单
  if (isMobile.value && mobileMenuOpen.value) {
    mobileMenuOpen.value = false
  }
  
  // 添加视口缩放检测
  const viewport = window.innerWidth / window.outerWidth;
  if (viewport < 0.9) {
    document.body.classList.add('high-dpi')
  } else {
    document.body.classList.remove('high-dpi')
  }
}

// 移动端菜单控制
const toggleMobileMenu = () => {
  mobileMenuOpen.value = !mobileMenuOpen.value
  // 更新无障碍属性
  const menuButton = document.querySelector('.mobile-menu-toggle')
  if (menuButton) {
    menuButton.setAttribute('aria-expanded', mobileMenuOpen.value.toString())
  }
}

// 搜索历史管理
const loadSearchHistory = () => {
  try {
    const history = localStorage.getItem('searchHistory')
    if (history) {
      searchHistory.value = JSON.parse(history)
    }
  } catch (error) {
    console.error('加载搜索历史失败:', error)
    searchHistory.value = []
  }
}

const saveSearchHistory = () => {
  try {
    // 限制历史记录数量为10条
    if (searchHistory.value.length > 10) {
      searchHistory.value = searchHistory.value.slice(0, 10)
    }
    localStorage.setItem('searchHistory', JSON.stringify(searchHistory.value))
  } catch (error) {
    console.error('保存搜索历史失败:', error)
  }
}

const addSearchKeyword = (keyword) => {
  if (!keyword.trim()) return
  
  // 如果已存在，先移除
  const index = searchHistory.value.indexOf(keyword)
  if (index > -1) {
    searchHistory.value.splice(index, 1)
  }
  
  // 添加到开头
  searchHistory.value.unshift(keyword)
  saveSearchHistory()
}

// 搜索商品 - 增强版
const handleSearch = () => {
  if (!searchKeyword.value.trim()) {
    ElMessage.warning('请输入搜索关键词')
    return
  }
  
  addSearchKeyword(searchKeyword.value.trim())
  
  // 添加视觉反馈
  const searchButton = document.querySelector('.search-button')
  if (searchButton) {
    searchButton.classList.add('searching')
    setTimeout(() => {
      searchButton.classList.remove('searching')
    }, 500)
  }
  
  router.push({ 
    path: '/products', 
    query: { keyword: searchKeyword.value },
    scrollBehavior: () => ({ top: 0, behavior: 'smooth' })
  })
  
  showSearchSuggestions.value = false
}

// 处理搜索输入 - 新增生成搜索建议功能
const handleSearchInput = () => {
  const keyword = searchKeyword.value.trim()
  
  if (keyword) {
    // 生成搜索建议
    generateSearchSuggestions(keyword)
  } else {
    // 清空搜索建议
    searchSuggestions.value = []
  }
}

// 生成搜索建议 - 新增函数
const generateSearchSuggestions = (keyword) => {
  // 从热门搜索和历史记录中筛选匹配的关键词
  const allKeywords = [...popularSearches.value, ...searchHistory.value]
  const suggestions = allKeywords
    .filter(item => item.toLowerCase().includes(keyword.toLowerCase()))
    .filter((item, index, self) => self.indexOf(item) === index) // 去重
    .slice(0, 5) // 最多5条建议
  
  searchSuggestions.value = suggestions
}

// 选择搜索建议
const selectSearchSuggestion = (keyword) => {
  searchKeyword.value = keyword
  handleSearch()
}

// 清除搜索历史 - 增强版
const clearSearchHistory = () => {
  ElMessageBox.confirm('确定要清除所有搜索历史吗？', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning',
    center: true
  }).then(() => {
    try {
      searchHistory.value = []
      localStorage.removeItem('searchHistory')
      ElMessage.success('搜索历史已清除')
    } catch (error) {
      console.error('清除搜索历史失败:', error)
      ElMessage.error('清除搜索历史失败')
    }
  }).catch(() => {
    // 取消清除操作
  })
}
// 延迟隐藏搜索建议（解决点击建议项时先隐藏再点击的问题）
const hideSearchSuggestions = () => {
  setTimeout(() => {
    showSearchSuggestions.value = false
  }, 200)
}

// 关闭移动端菜单（如果打开）
const closeMobileMenuIfOpen = () => {
  if (isMobile.value && mobileMenuOpen.value) {
    mobileMenuOpen.value = false
    nextTick(() => {
      const menuButton = document.querySelector('.mobile-menu-toggle')
      if (menuButton) {
        menuButton.setAttribute('aria-expanded', 'false')
      }
    })
  }
}

// 跳转到个人信息
const goToProfile = () => {
  closeMobileMenuIfOpen()
  router.push('/user/profile')
}

// 跳转到我的订单
const goToOrders = () => {
  closeMobileMenuIfOpen()
  router.push('/orders')
}

// 跳转到我的商品
const goToMyProducts = () => {
  closeMobileMenuIfOpen()
  router.push('/products?my=1')
}

// 跳转到后台管理
const goToAdmin = () => {
  closeMobileMenuIfOpen()
  router.push('/admin')
}

// 退出登录
const handleLogout = () => {
  closeMobileMenuIfOpen()
  userStore.logout()
  ElMessage.success('退出登录成功')
  router.push('/')
}

// 滚动检测函数 - 优化版
const handleScroll = () => {
  const scrollPosition = window.scrollY
  
  // 导航栏滚动状态变化使用防抖效果
  requestAnimationFrame(() => {
    isNavbarScrolled.value = scrollPosition > 50
  })
  
  // 添加滚动进度指示器
  const scrollProgress = (scrollPosition / (document.body.scrollHeight - window.innerHeight)) * 100
  const progressBar = document.getElementById('scroll-progress')
  if (progressBar) {
    progressBar.style.width = `${scrollProgress}%`
    progressBar.setAttribute('aria-valuenow', scrollProgress.toString())
  }
}

// 点击页面其他区域关闭移动端菜单
const handleDocumentClick = (event) => {
  if (isMobile.value && mobileMenuOpen.value) {
    const navbar = document.querySelector('.navbar')
    if (navbar && !navbar.contains(event.target)) {
      closeMobileMenuIfOpen()
    }
  }
}

// 处理键盘事件 - 新增函数
const handleKeydown = (event) => {
  // ESC键关闭所有下拉菜单
  if (event.key === 'Escape') {
    showSearchSuggestions.value = false
    closeMobileMenuIfOpen()
  }
}

// 生命周期钩子
onMounted(() => {
  // 加载搜索历史
  loadSearchHistory()
  
  // 初始化检测窗口大小
  checkMobile()
  
  window.addEventListener('scroll', handleScroll)
  window.addEventListener('resize', checkMobile)
  document.addEventListener('click', handleDocumentClick)
  document.addEventListener('keydown', handleKeydown) // 添加键盘事件监听
  
  // 添加页面加载动画
  document.body.classList.add('page-loaded')
})

onUnmounted(() => {
  window.removeEventListener('scroll', handleScroll)
  window.removeEventListener('resize', checkMobile)
  document.removeEventListener('click', handleDocumentClick)
  document.removeEventListener('keydown', handleKeydown) // 移除键盘事件监听
})

// 监听路由变化 - 增强版
watch(() => route.path, () => {
  // 关闭所有下拉菜单
  showSearchSuggestions.value = false
  closeMobileMenuIfOpen()
  
  // 恢复背景滚动
  document.body.style.overflow = ''
})
</script>

<style scoped>
/* 添加全局样式重置和平滑滚动 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  background-color: #f5f7fa;
  color: #303133;
  line-height: 1.6;
  scroll-behavior: smooth;
  transition: background-color 0.3s ease;
}

/* 页面加载动画 */
body:not(.page-loaded) {
  opacity: 0;
}

body.page-loaded {
  animation: pageLoad 0.8s ease-out forwards;
}

@keyframes pageLoad {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.layout-container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* 导航栏样式 - 现代化设计优化 */
.navbar {
  background: linear-gradient(135deg, #1e40af 0%, #0c4a6e 100%);
  box-shadow: 0 4px 20px rgba(30, 64, 175, 0.2);
  position: sticky;
  top: 0;
  z-index: 1000;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

/* 滚动进度指示器 */
.scroll-progress {
  position: absolute;
  top: 0;
  left: 0;
  height: 4px;
  background: linear-gradient(90deg, #fbbf24, #f59e0b);
  width: 0;
  transition: width 0.2s ease;
  z-index: 1001;
}

/* 导航栏滚动效果 */
.navbar.scrolled {
  background: linear-gradient(135deg, #1e3a8a 0%, #0369a1 100%);
  box-shadow: 0 6px 25px rgba(30, 64, 175, 0.3);
  padding: 5px 0;
  box-shadow: 0 8px 32px rgba(30, 64, 175, 0.25);
}

/* 下拉菜单样式 */
.nav-dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-trigger {
  display: flex;
  align-items: center;
  gap: 5px;
  cursor: pointer;
  padding: 8px 16px;
  color: rgba(255, 255, 255, 0.9);
  font-size: 16px;
  font-weight: 500;
  transition: all 0.3s ease;
}

.dropdown-trigger:hover {
  color: #fbbf24;
}

.dropdown-icon {
  transition: transform 0.3s ease;
}

.nav-dropdown:hover .dropdown-icon {
  transform: rotate(180deg);
}

.dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  background: white;
  border-radius: 18px;
  box-shadow: 0 12px 48px rgba(30, 64, 175, 0.3);
  min-width: 200px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px) scale(0.95);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 1001;
  overflow: hidden;
  margin-top: 8px;
  border: 1px solid rgba(243, 244, 246, 0.8);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.nav-dropdown:hover .dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
}

.dropdown-item {
  display: block;
  padding: 14px 24px;
  color: #334155;
  text-decoration: none;
  transition: all 0.3s ease;
  position: relative;
  white-space: nowrap;
  font-weight: 500;
  background: transparent;
  overflow: hidden;
}

.dropdown-item:hover {
  background-color: #f0f9ff;
  color: #1e40af;
  padding-left: 28px;
  transform: translateX(6px);
  box-shadow: inset 0 0 0 1px rgba(30, 64, 175, 0.1);
}

.dropdown-item::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  height: 0;
  background: linear-gradient(135deg, #1e40af 0%, #0c4a6e 100%);
  transition: all 0.3s ease;
  border-radius: 2px;
}

.dropdown-item:hover::before {
  height: 100%;
  animation: pulseBorder 1.5s infinite;
}

@keyframes pulseBorder {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.6;
  }
}

/* 主按钮样式 */
.nav-link-primary {
  background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
  color: #1d4ed8 !important;
  border-radius: 25px;
  font-weight: 600;
  box-shadow: 0 4px 15px rgba(251, 191, 36, 0.4);
  transition: all 0.3s ease;
  padding: 10px 22px !important;
  overflow: hidden;
}

.nav-link-primary:hover {
  transform: translateY(-3px) scale(1.05);
  box-shadow: 0 8px 25px rgba(251, 191, 36, 0.6);
  background: #f59e0b;
}

.nav-link-primary::after {
  display: none;
}

.navbar-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
  height: 76px;
  transition: height 0.3s ease;
  position: relative;
}

.navbar.scrolled .navbar-content {
  height: 68px;
}

.navbar:hover {
  box-shadow: 0 8px 30px rgba(37, 99, 235, 0.3);
}

.navbar-left {
  display: flex;
  align-items: center;
  gap: 30px;
}

.logo {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: white;
  font-weight: 700;
  font-size: 26px;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  transition: all 0.3s ease;
}

.logo:hover {
  transform: translateY(-2px);
}

.logo-icon {
  font-size: 36px;
  color: #fbbf24;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.logo-text {
  color: white;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.nav-links {
  display: flex;
  gap: 25px;
}

.nav-link {
  color: rgba(255, 255, 255, 0.9);
  text-decoration: none;
  padding: 10px 16px;
  font-size: 16px;
  font-weight: 500;
  transition: all 0.3s ease;
  position: relative;
  border-radius: 8px;
  overflow: hidden;
}

.nav-link:hover {
  color: #ffffff;
  background-color: rgba(255, 255, 255, 0.15);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(255, 255, 255, 0.1);
}

.nav-link::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 3px;
  background: linear-gradient(90deg, #fbbf24, #f59e0b);
  transition: all 0.3s ease;
  border-radius: 3px;
}

.nav-link:hover::after {
  width: 80%;
  animation: underlinePulse 1.5s infinite;
}

@keyframes underlinePulse {
  0%, 100% {
    opacity: 1;
    transform: scaleX(1) translateX(-50%);
  }
  50% {
    opacity: 0.8;
    transform: scaleX(0.9) translateX(-50%);
  }
}

.nav-link.router-link-active {
  color: #fbbf24;
  font-weight: 600;
  background-color: rgba(251, 191, 36, 0.15);
  box-shadow: 0 4px 12px rgba(251, 191, 36, 0.1);
}

.nav-link.router-link-active::after {
  width: 80%;
  background: linear-gradient(90deg, #fbbf24, #f59e0b);
}

.navbar-right {
  display: flex;
  align-items: center;
  gap: 20px;
}

/* 搜索框样式 - 增强版 */
.search-wrapper {
  position: relative;
  width: 240px;
  transition: width 0.3s ease, transform 0.3s ease;
  z-index: 1001;
}

.search-wrapper:focus-within {
  width: 280px;
  transform: translateY(-2px);
}

.search-input-container {
  position: relative;
  display: flex;
  align-items: center;
}

.search-input {
  width: 100%;
  border-radius: 25px !important;
  transition: all 0.3s ease;
  border: 2px solid rgba(255, 255, 255, 0.2) !important;
  background-color: rgba(255, 255, 255, 0.95);
  padding-right: 45px !important;
  backdrop-filter: blur(10px);
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.05);
}

.search-input:focus {
  box-shadow: 0 0 0 3px rgba(251, 191, 36, 0.2) !important;
  border-color: #fbbf24 !important;
  background-color: white;
  transform: translateY(-2px);
}

.search-button {
  position: absolute;
  right: 4px;
  height: 38px;
  width: 38px;
  border: none;
  background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
  cursor: pointer;
  border-radius: 50%;
  color: #1d4ed8;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1002;
  font-weight: 600;
  box-shadow: 0 4px 15px rgba(251, 191, 36, 0.4);
  transform: scale(1);
}

.search-button:hover:not(:disabled) {
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
  transform: scale(1.15);
  box-shadow: 0 6px 20px rgba(251, 191, 36, 0.6);
}

.search-button:active:not(:disabled) {
  transform: scale(0.95);
}

.search-button:disabled {
  background: rgba(255, 255, 255, 0.5);
  color: #9ca3af;
  cursor: not-allowed;
  box-shadow: none;
}

/* 搜索按钮加载动画 */
.search-button.searching {
  animation: pulse 1s infinite;
}

@keyframes pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(76, 175, 80, 0.4);
  }
  70% {
    box-shadow: 0 0 0 10px rgba(76, 175, 80, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(76, 175, 80, 0);
  }
}

/* 搜索建议下拉框 */
.search-suggestions {
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  right: 0;
  background: white;
  border-radius: 16px;
  box-shadow: 0 12px 48px rgba(0, 0, 0, 0.15);
  z-index: 1002;
  overflow: hidden;
  max-height: 350px;
  overflow-y: auto;
  border: 1px solid rgba(224, 224, 224, 0.5);
  animation: slideDown 0.2s ease-out;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transform-origin: top center;
}

@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.suggestion-title {
  padding: 12px 16px 8px;
  font-size: 12px;
  color: #909399;
  border-bottom: 1px solid #ebeef5;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  position: relative;
}

.suggestion-item {
  display: flex;
  align-items: center;
  padding: 12px 16px;
  cursor: pointer;
  transition: all 0.3s ease;
  color: #303133;
  border-bottom: 1px solid rgba(235, 238, 245, 0.5);
  position: relative;
}

.suggestion-item:hover,
.suggestion-item:focus {
  background-color: rgba(76, 175, 80, 0.08);
  color: #4caf50;
  padding-left: 20px;
  outline: none;
}

.suggestion-item:last-child:not(.clear-history) {
  border-bottom: none;
}

.suggestion-item .el-icon {
  margin-right: 8px;
  font-size: 16px;
  color: #909399;
  transition: color 0.3s ease;
  flex-shrink: 0;
}

.suggestion-item:hover .el-icon {
  color: #4caf50;
}

/* 热门搜索排名样式 */
.popular-rank {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 2px;
  background-color: #4caf50;
  color: white;
  font-size: 12px;
  font-weight: bold;
  margin-right: 8px;
  flex-shrink: 0;
}

.popular-item:nth-child(1) .popular-rank {
  background-color: #ff5722;
}

.popular-item:nth-child(2) .popular-rank {
  background-color: #ff9800;
}

.popular-item:nth-child(3) .popular-rank {
  background-color: #ffc107;
}

.popular-item:nth-child(n+4) .popular-rank {
  background-color: #999;
}

.clear-history {
  padding: 12px 16px;
  text-align: center;
  color: #909399;
  cursor: pointer;
  transition: all 0.3s ease;
  border-top: 1px solid #ebeef5;
  font-size: 14px;
  font-weight: 500;
}

.clear-history:hover,
.clear-history:focus {
  color: #4caf50;
  background-color: rgba(76, 175, 80, 0.05);
  outline: none;
}

/* 搜索历史列表样式 */
.history-list,
.popular-list {
  display: flex;
  flex-wrap: wrap;
  padding: 5px 8px;
  gap: 8px;
}

.history-item,
.popular-item {
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  background-color: #f5f5f5;
  border-radius: 16px;
  border: none;
  font-size: 13px;
  color: #666;
  cursor: pointer;
  transition: all 0.2s ease;
}

.history-item:hover,
.popular-item:hover,
.history-item:focus,
.popular-item:focus {
  background-color: #e8f5e8;
  color: #4caf50;
  transform: translateY(-2px);
  outline: none;
}

/* 搜索建议动画效果 */
.suggestion-item,
.history-item,
.popular-item {
  transition: all 0.2s cubic-bezier(0.25, 0.1, 0.25, 1);
}

/* 焦点状态增强 */
.suggestion-item:focus,
.history-item:focus,
.popular-item:focus,
.clear-history:focus {
  box-shadow: 0 0 0 2px rgba(76, 175, 80, 0.3);
}

/* 搜索下拉框滚动条样式 */
.search-suggestions::-webkit-scrollbar {
  width: 6px;
}

.search-suggestions::-webkit-scrollbar-track {
  background: #f1f1f1;
}

.search-suggestions::-webkit-scrollbar-thumb {
  background: #c1c1c1;
  border-radius: 3px;
}

.search-suggestions::-webkit-scrollbar-thumb:hover {
  background: #a8a8a8;
}

/* 无障碍高对比度模式支持 */
@media (prefers-contrast: high) {
  .search-input:focus {
    border-color: #2e7d32;
    box-shadow: 0 0 0 3px rgba(46, 125, 50, 0.3);
  }
  
  .suggestion-item:hover,
  .suggestion-item:focus,
  .history-item:hover,
  .history-item:focus,
  .popular-item:hover,
  .popular-item:focus {
    background-color: #4caf50;
    color: white;
  }
  
  .navbar {
    background: #000080;
    border-bottom: 3px solid #ffd700;
  }
  
  .nav-link.router-link-active {
    color: #ffd700;
    border: 2px solid #ffd700;
  }
}

/* 减少动画偏好支持 */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* 移动端菜单按钮 */
.mobile-menu-toggle {
  display: none;
  background: rgba(255, 255, 255, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.2);
  font-size: 24px;
  cursor: pointer;
  color: white;
  transition: all 0.3s ease;
  border-radius: 8px;
  padding: 8px 12px;
  backdrop-filter: blur(10px);
  z-index: 1003;
  position: relative;
  overflow: hidden;
}

.mobile-menu-toggle:hover {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0.3) 100%);
  transform: rotate(10deg) scale(1.1);
  box-shadow: 0 4px 12px rgba(255, 255, 255, 0.2);
}

.cart-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.15) 100%);
  border-radius: 50%;
  color: white;
  font-size: 24px;
  transition: all 0.3s ease;
  position: relative;
  border: 2px solid rgba(255, 255, 255, 0.2);
  padding: 0;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.cart-icon:hover {
  background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
  color: #1d4ed8;
  transform: scale(1.1) translateY(-3px);
  border-color: #fbbf24;
  box-shadow: 0 6px 20px rgba(251, 191, 36, 0.5);
}

.cart-badge {
  position: absolute;
  top: -8px;
  right: -8px;
  background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
  color: white;
  font-size: 12px;
  font-weight: bold;
  padding: 3px 7px;
  border-radius: 12px;
  min-width: 22px;
  text-align: center;
  transition: all 0.3s ease;
  border: 2px solid white;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.user-menu {
  display: flex;
  align-items: center;
}

.user-avatar {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  padding: 6px 14px;
  border-radius: 25px;
  transition: all 0.3s ease;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.15) 100%);
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.user-avatar:hover {
  background-color: rgba(255, 255, 255, 0.2);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(255, 255, 255, 0.1);
}

.user-name {
  color: white;
  font-weight: 500;
  transition: color 0.3s ease;
}

.user-avatar:hover .user-name {
  color: #fbbf24;
}

.login-register {
  display: flex;
  gap: 10px;
}

.nav-button {
  padding: 10px 20px;
  border-radius: 25px;
  text-decoration: none;
  transition: all 0.3s ease;
  font-weight: 500;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.15) 100%);
  color: white;
  backdrop-filter: blur(10px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.nav-button:hover {
  border-color: #fbbf24;
  color: #fbbf24;
  background-color: rgba(255, 255, 255, 0.15);
  transform: translateY(-2px);
}

.nav-button.primary {
  background-color: #fbbf24;
  color: #1d4ed8;
  border-color: #fbbf24;
  font-weight: 600;
  box-shadow: 0 4px 15px rgba(251, 191, 36, 0.3);
}

.nav-button.primary:hover {
  background-color: #f59e0b;
  border-color: #f59e0b;
  transform: translateY(-3px) scale(1.05);
  box-shadow: 0 8px 25px rgba(251, 191, 36, 0.4);
}

/* 主内容区域样式 */
.main-content {
  flex: 1;
  max-width: 1200px;
  width: 100%;
  margin: 0 auto;
  padding: 0;
}

/* 页脚样式 */
.footer {
  background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
  padding: 80px 0 40px;
  margin-top: 0;
  color: #ffffff;
}

.footer-content {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.footer-info {
  text-align: center;
  margin-bottom: 40px;
}

.footer-info h3 {
  color: #ffffff;
  margin-bottom: 15px;
  font-size: 28px;
  font-weight: bold;
  position: relative;
  display: inline-block;
}

.footer-info h3::after {
  content: '';
  position: absolute;
  bottom: -10px;
  left: 50%;
  transform: translateX(-50%);
  width: 60px;
  height: 4px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 2px;
}

.footer-social {
  display: flex;
  gap: 20px;
  margin-top: 20px;
  justify-content: center;
}

.social-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.1);
  color: #ffffff;
  font-size: 20px;
  transition: all 0.3s ease;
  text-decoration: none;
}

.social-icon:hover {
  background-color: #667eea;
  transform: translateY(-3px);
  box-shadow: 0 5px 20px rgba(102, 126, 234, 0.3);
}

.footer-info p {
  color: #adb5bd;
  margin: 15px 0 0;
  font-size: 16px;
  line-height: 1.6;
  max-width: 600px;
}

.footer-links {
  display: flex;
  gap: 30px;
  margin-bottom: 40px;
  flex-wrap: wrap;
  justify-content: center;
  max-width: 800px;
  width: 100%;
}

.footer-link {
  color: #adb5bd;
  text-decoration: none;
  transition: all 0.3s ease;
  font-size: 16px;
  position: relative;
  padding: 5px 10px;
}

.footer-link:hover {
  color: #ffffff;
  transform: translateY(-3px);
}

.footer-link::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 0;
  height: 2px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  transform: translateX(-50%);
  transition: width 0.3s ease;
}

.footer-link:hover::after {
  width: 80%;
}

.footer-copyright {
  color: #adb5bd;
  font-size: 15px;
  text-align: center;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

/* 响应式媒体查询 - 平板和移动设备优化 */
@media (max-width: 1024px) {
  .navbar-content {
    padding: 0 16px;
  }
  
  .search-wrapper {
    width: 200px;
  }
  
  .search-wrapper:focus-within {
    width: 240px;
  }
  
  .nav-links {
    gap: 15px;
  }
  
  .nav-link {
    padding: 8px 12px;
    font-size: 15px;
  }
}

@media (max-width: 768px) {
  .mobile-menu-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  .nav-links {
    display: none;
  }
  
  .navbar-right {
    gap: 12px;
  }
  
  .search-wrapper {
    width: 160px;
  }
  
  .search-wrapper:focus-within {
    width: 200px;
  }
  
  .navbar-content {
    height: 70px;
    padding: 0 16px;
  }
  
  .navbar.scrolled .navbar-content {
    height: 62px;
  }
  
  .logo {
    font-size: 22px;
  }
  
  .logo-icon {
    font-size: 30px;
  }
  
  .cart-icon {
    width: 40px;
    height: 40px;
    font-size: 20px;
  }
  
  .user-avatar {
    padding: 5px 10px;
    gap: 8px;
  }
}

@media (max-width: 480px) {
  .search-wrapper {
    display: none;
  }
  
  .navbar-right {
    gap: 10px;
  }
  
  .navbar-content {
    height: 66px;
    padding: 0 12px;
  }
  
  .navbar.scrolled .navbar-content {
    height: 58px;
  }
  
  .logo {
    font-size: 20px;
    gap: 8px;
  }
  
  .logo-icon {
    font-size: 28px;
  }
  
  .cart-icon {
    width: 38px;
    height: 38px;
    font-size: 18px;
  }
  
  .nav-button {
    padding: 8px 16px;
    font-size: 14px;
  }
}

.footer-copyright a {
  color: #667eea;
  text-decoration: none;
  transition: color 0.3s ease;
}

.footer-copyright a:hover {
  color: #ffffff;
  text-decoration: underline;
}

/* 响应式设计 */
@media (max-width: 1024px) {
  .navbar-content {
    padding: 0 15px;
  }
  
  .navbar-left {
    gap: 25px;
  }
  
  .nav-links {
    gap: 20px;
  }
  
  .search-wrapper {
    width: 200px;
  }
}

@media (max-width: 768px) {
  .mobile-menu-toggle {
    display: block;
  }
  
  .navbar-content {
    padding: 0 10px;
    height: auto;
    flex-wrap: wrap;
    padding: 15px 10px;
    position: relative;
  }
  
  .navbar-left {
    width: 100%;
    justify-content: space-between;
    margin-bottom: 15px;
    gap: 20px;
  }
  
  .logo {
    font-size: 20px;
  }
  
  .nav-links {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background-color: white;
    flex-direction: column;
    gap: 0;
    border-top: 1px solid #ebeef5;
    border-bottom: 1px solid #ebeef5;
    padding: 10px 0;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    z-index: 1001;
  }
  
  .nav-links.mobile-menu-active {
    display: flex;
  }
  
  .nav-link {
    font-size: 16px;
    padding: 12px 20px;
    border-bottom: 1px solid rgba(235, 238, 245, 0.5);
    width: 100%;
    text-align: left;
    border-radius: 0;
  }
  
  .nav-link:last-child {
    border-bottom: none;
  }
  
  .navbar-right {
    width: 100%;
    justify-content: space-between;
  }
  
  .search-wrapper {
    width: 150px;
  }
  
  .footer-info h3 {
    font-size: 24px;
  }
  
  .footer-links {
    gap: 20px;
  }
}

@media (max-width: 480px) {
  .navbar-left {
    flex-direction: row;
    align-items: center;
    gap: 15px;
  }
  
  .navbar-right {
    flex-direction: column;
    gap: 15px;
  }
  
  .search-wrapper {
    width: 100%;
  }
  
  .user-menu {
    justify-content: center;
  }
}

/* 动画效果 */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes slideIn {
  from {
    transform: translateX(100%);
  }
  to {
    transform: translateX(0);
  }
}

@keyframes pulse {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
  100% {
    transform: scale(1);
  }
}

/* 无障碍支持 */
.nav-link:focus,
.nav-button:focus,
.search-button:focus,
.mobile-menu-toggle:focus {
  outline: 2px solid #667eea;
  outline-offset: 2px;
}

/* 高对比度模式 */
@media (prefers-contrast: high) {
  .navbar {
    background-color: #ffffff;
    border-bottom: 2px solid #000000;
  }
  
  .nav-link {
    color: #000000;
    border-color: #000000;
  }
  
  .nav-link.active {
    background-color: #000000;
    color: #ffffff;
  }
  
  .nav-button.primary {
    background-color: #000000;
    color: #ffffff;
  }
}
</style>